<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <link rel="stylesheet" href="./js/formSelects-v4.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.js"></script>
    <script src="js/formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/httpRequst.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">隐患上报</a>

      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">


    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <fieldset class="layui-elem-field">
        <legend>隐患上报</legend>
        <div class="layui-row">
            <form class="layui-form ">
                <div class="layui-col-md6">


                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">描述文本</label>
                        <div class="layui-input-block">
                            <textarea   id="deviceDiscription" placeholder="请输入内容" class="layui-textarea"></textarea>
                            <!--<div id="tip" class="box"  style="position: absolute;left: 2px;top:36px;"><div class="box_content">前置设备没有此零件</div></div>-->
                            <div class="tooltip" id="tip">
                                <span class="tooltiptext">前置设备没有此零件</span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">

                        <div class="layui-input-block">
                            <button class="layui-btn" type="button" id="deviceRecognition">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>


                </div>
                <div class="layui-col-md6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">隐患组建</label>
                        <div class="layui-input-block" style="margin-right:10px ">
                            <select name="trouble" xm-select="select1" id="select1" xm-select-search="">
                                <option value="">请选择, 此处是联动多选</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" type="button" id="deviceSubmit">立即提交</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </fieldset>
    <fieldset class="layui-elem-field">
        <legend>隐患管理</legend>
        <div class="layui-row">
            <div class="layui-col-md6">
                <div id="nodes" style="width: 95%;height:600px;background: #fdf6e3;margin: 20px ">
                </div>
            </div>
            <div class="layui-col-md6">
                <div id="toubleTable" style="width: 100%;margin: 20px" lay-filter="toubleTable"></div>
            </div>

        </div>
    </fieldset>
</div>


<!--<div class="layui-col-md2" id="troubleSubmit"-->
<!--style=" height:700px;background: #fdf6e3; ">-->

<!--<form class="layui-form   layui-form-pane" style="position: relative;right: -86px">-->
<!--<div class="layui-form-item" id="x-city">-->

<!--<div class="layui-input-inline">-->
<!--<select name="province">-->
<!--<option value="">请选设备</option>-->
<!--</select>-->
<!--</div>-->
<!--<div class="layui-input-inline">-->
<!--<select name="city">-->
<!--<option value="">请选配件</option>-->
<!--</select>-->
<!--</div>-->
<!--<div class="layui-input-inline">-->
<!--<select name="area">-->
<!--<option value="">请选部位</option>-->
<!--</select>-->
<!--</div>-->
<!--<div class="layui-input-inline">-->
<!--<select name="area">-->
<!--<option value="">请选隐患</option>-->
<!--</select>-->
<!--</div>-->
<!--</div>-->
<!--</form>-->


<!--</div>-->

</div>

<style type="text/css">
    .tooltip {
        position: absolute;
        left: 2px;
        top:36px;
        display: inline-block;
        border-bottom: 1px dotted black;
    }

    .tooltip .tooltiptext {
        visibility: visible;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        top: 150%;
        left: 50%;
        margin-left: -60px;
    }

    .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent black transparent;
    }
</style>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.js"></script>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="sub">提交</a>

        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

    </div>
</script>
<script src="js/formSelects-v4.js" charset="utf-8"></script>
<script src="js/httpRequst.js"></script>
<script>
    layui.use(['form', 'layer', 'table'], function () {
        form = layui.form;
        var formSelects = layui.formSelects;
        var layer = layui.layer
        var templeResult;
        var tempGraph;
        var myChartDevices = echarts.init(document.getElementById('nodes'))//初始化，如果你的容器id为main的<div></div>
        var table = layui.table;
        var tabledata = [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
        var cols = [[ //表头
            {field: 'device', title: '设备', align: 'center'}
            , {field: 'peijian', title: '零件', align: 'center'}
            , {field: 'buwei', title: '部位', align: 'center'}
            , {field: 'statu', title: '状态', align: 'center'}
            , {title: '操作', align: 'center', toolbar: '#toolbar'}
        ]]
        table.render({
            elem: '#toubleTable'
            , height: 600
            , data: []
            , page: true //开启分页
            , cols: cols
        });
//实时获取实体和添加标记选中文本
        $("#deviceDiscription").on('input', function (e) {

            jeecg.ajaxJsonGet("nlp/content", {content: $("#deviceDiscription").val()}, function (result) {
                templeResult = result
                drwafromResult(result)
            })
            $("#deviceDiscription").iSelectStr("速度")
            console.log($("#deviceDiscription").iGetFieldPos())
            $("#tip").css('left',2+$("#deviceDiscription").iGetFieldPos()*14)
        })



        $("#deviceRecognition").on('click', function (e) {

            jeecg.ajaxJsonGet("nlp/content", {content: $("#deviceDiscription").val()}, function (result) {

                templeResult = result
                drwafromResult(result)
            })

            formSelects.data('select1', 'server', {
                url: ctxPath + "nlp/content?content=" + $("#deviceDiscription").val(),
                linkage: true,
                keyName: 'title',            //自定义返回数据中name的key, 默认 name
                keyVal: 'id',            //自定义返回数据中value的key, 默认 value
                keyChildren: '拥有',
                linkageWidth: 130   //代表每一级别的宽度, 默认是100
            });
        });

        $("#deviceSubmit").on('click', function (e) {
            var tabledata = []

            var troubleArray = formSelects.value('select1', 'name')
            for (var index in troubleArray) {
                var toubleItem = {}
                toubleItem.device = troubleArray[index].split('/')[0]
                toubleItem.peijian = troubleArray[index].split('/')[1]
                toubleItem.buwei = troubleArray[index].split('/')[2]
                toubleItem.statu = "未上报"
                tabledata.push(toubleItem)
            }

            table.render({
                elem: '#toubleTable'

                , height: 600
                , data: tabledata
                , page: true //开启分页
                , cols: cols
            });
        });

        //渲染设备引力图
        function drawDevice(title) {
            jeecg.ajaxJsonGet('database/device/getR', {title: title}, function (result) {

                drwafromResult(result)

            })

        }


        function drwafromResult(result) {
            var nodes = [];
            var graph = {}
            var links = []
            for (index in result) {
                var dataitem = {}
                dataitem.id = result[index].id
                dataitem.name = result[index].title
                dataitem.itemStyle = {
                    "normal": {
                        "color": "rgb(236,81,72)"
                    }
                }
                dataitem.symbolSize = (result[index].拥有 == null ? 10 : 10 + result[index].拥有.length * 10)
                dataitem.attributes = {
                    "modularity_class": 0
                }
                nodes.push(dataitem)
                if (result[index].拥有 != null) {
                    for (var index1 = 0; index1 < result[index].拥有.length; index1++) {
                        var linkitem = {}
                        linkitem.id = index + index1
                        linkitem.name = "拥有"
                        linkitem.source = dataitem.id.toString()
                        linkitem.target = result[index].拥有[index1].id.toString()
                        linkitem.lineStyle = {
                            "normal": {}
                        }
                        links.push(linkitem)
                    }
                }
            }
            graph.nodes = nodes
            graph.links = links
            tempGraph = graph
            deviceNodePic(graph, myChartDevices, 'device', '设备引力图')

        }

        table.on('tool(toubleTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'sub') {
                console.log(data)
            } else if (layEvent === 'del') {

            }
        });

        function deviceNodePic(graph, drawChart, object, chartName) {
            drawChart.showLoading();
            var categories = [{name: '电梯'}, {name: '叉车'}, {name: '起重机'}, {name: '龙门吊'}, {name: '镀锌生产线'}];
            graph.nodes.forEach(function (node) {
                node.itemStyle = null;
                node.value = node.symbolSize;
                node.symbolSize = 15;
                node.label = {
                    normal: {
                        show: true
                    }
                };
                node.category = node.attributes.modularity_class;
            });
            option = {
                title: {
                    text: chartName,

                    top: 'top',
                    left: 'left'
                },
                tooltip: {},
                legend: [{
                    selectedMode: 'single',
                    data: categories.map(function (a) {
                        return a.name;
                    })
                }],
                animationDuration: 1500,
                animationEasingUpdate: 'quinticInOut',
                series: [
                    {
                        name: '设备引力图',
                        type: 'graph',
                        force: {
                            initLayout: 'circular',

                            edgeLength: 70,
                            repulsion: 40,
                            gravity: 0.1
                        },

                        draggable: true,
                        layout: 'force',
                        edgeSymbol: ['none', 'arrow'],
                        data: graph.nodes,
                        links: graph.links,
                        categories: categories,
                        roam: true,
                        focusNodeAdjacency: true,
                        itemStyle: {
                            normal: {
                                borderColor: '#fff',
                                borderWidth: 1,
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.3)'
                            }
                        },
                        label: {
                            position: 'right',
                            formatter: '{b}'
                        },
                        lineStyle: {
                            color: 'source',
                            curveness: 0
                        },
                        emphasis: {
                            label: {
                                show: true,
                                position: 'outer'
                            },
                            labelLine: {
                                show: true,
                                lineStyle: {
                                    color: 'red'
                                }
                            },
                            lineStyle: {
                                width: 10
                            }
                        }
                    }
                ]
            };
            drawChart.setOption(option);
            drawChart.hideLoading();
        }

        function drwafrom2Result2(thisResult, clickNode) {
            var links = []
            var nodes = []
            var graph = {}

            for (var index in thisResult.拥有) {
                var dataitem = {}
                dataitem.id = thisResult.拥有[index].id
                dataitem.name = thisResult.拥有[index].title
                dataitem.itemStyle = {
                    "normal": {
                        "color": "rgb(236,81,72)"
                    }
                }
                dataitem.symbolSize = (thisResult.拥有[index] == null ? 10 : 10 + thisResult.拥有[index].length * 10)
                dataitem.attributes = {
                    "modularity_class": 0
                }
                nodes.push(dataitem)
            }


            for (var index in tempGraph.nodes) {
                if (tempGraph.nodes[index].id === clickNode.id) {

                    for (var index1 in thisResult.拥有) {
                        var linkitem = {}
                        linkitem.id = thisResult.拥有[index1].id
                        linkitem.name = "拥有"
                        linkitem.source = clickNode.id.toString()
                        linkitem.target = thisResult.拥有[index1].id.toString()
                        linkitem.lineStyle = {
                            "normal": {}
                        }
                        links.push(linkitem)
                    }
                }
            }

            graph.nodes = tempGraph.nodes.concat(nodes)
            graph.links = tempGraph.links.concat(links)


            tempGraph = graph
            deviceNodePic(graph, myChartDevices, 'device', '设备引力图')
        }

        myChartDevices.on('click', function (params) {
            console.log(params)
            var clickNode = params.data
            jeecg.ajaxJsonGet('database/device/get', {title: params.name}, function (result) {

                drwafrom2Result2(result, clickNode)
            })
        });

        //光标操作
        //         1、获取光标位置：$(elem).iGetFieldPos()；
        // 2、设置光标位置：$(elem).iSelectField(start)；
        // 3、选中指定位置内的字符：$(elem).iSelectField(start,end)；
        // 4、选中指定的字符：$(elem).iSelectStr(str)；
        // 5、在光标之后插入字符串：$(elem).iAdd(str)；
        // 6、删除光标前面（-n）或者后面（n）的n个字符：$(elem).iDel(n)；
        // ---
        ;(function($){
            /*
             * 文本域光标操作（选、添、删、取）
             */
            $.fn.extend({
                /*
                 * 获取光标所在位置
                 */
                iGetFieldPos:function(){
                    var field=this.get(0);
                    if(document.selection){
                        //IE
                        $(this).focus();
                        var sel=document.selection;
                        var range=sel.createRange();
                        var dupRange=range.duplicate();
                        dupRange.moveToElementText(field);
                        dupRange.setEndPoint('EndToEnd',range);
                        field.selectionStart=dupRange.text.length-range.text.length;
                        field.selectionEnd=field.selectionStart+ range.text.length;
                    }
                    return field.selectionStart;
                },
                /*
                 * 选中指定位置内字符 || 设置光标位置
                 * --- 从start起选中(含第start个)，到第end结束（不含第end个）
                 * --- 若不输入end值，即为设置光标的位置（第start字符后）
                 */
                iSelectField:function(start,end){
                    var field=this.get(0);
                    //end未定义，则为设置光标位置
                    if(arguments[1]==undefined){
                        end=start;
                    }
                    if(document.selection){
                        //IE
                        var range = field.createTextRange();
                        range.moveEnd('character',-$(this).val().length);
                        range.moveEnd('character',end);
                        range.moveStart('character',start);
                        range.select();

                    }else{
                        //非IE
                        field.setSelectionRange(start,end);
                        $(this).focus();
                    }

                },
                /*
                 * 选中指定字符串
                 */
                iSelectStr:function(str){
                    var field=this.get(0);
                    var i=$(this).val().indexOf(str);
                    i != -1 ? $(this).iSelectField(i,i+str.length) : false;

                },
                /*
                 * 在光标之后插入字符串
                 */
                iAddField:function(str){
                    var field=this.get(0);
                    var v=$(this).val();
                    var len=$(this).val().length;
                    if(document.selection){
                        //IE
                        $(this).focus()
                        document.selection.createRange().text=str;
                    }else{
                        //非IE
                        var selPos=field.selectionStart;
                        $(this).val($(this).val().slice(0,field.selectionStart)+str+$(this).val().slice(field.selectionStart,len));
                        this.iSelectField(selPos+str.length);
                    };
                },
                /*
                 * 删除光标前面(-)或者后面(+)的n个字符
                 */
                iDelField:function(n){
                    var field=this.get(0);
                    var pos=$(this).iGetFieldPos();
                    var v=$(this).val();
                    //大于0则删除后面，小于0则删除前面
                    $(this).val(n>0 ? v.slice(0,pos-n)+v.slice(pos) : v.slice(0,pos)+v.slice(pos-n));
                    $(this).iSelectField(pos-(n<0 ? 0 : n));
                }
            });
        })(jQuery);

    })
    ;

</script>

<script>var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>

</body>

</html>